<template>
  <div class="toScore">
    <el-card shadow="never" class="card">
      <div class="title">
        <h3>项目评分</h3>
      </div>
      <div class="input">
        <div>  待评分项目：<el-select v-model="projectId" clearable @clear="reset">
          <el-option v-for="item in projectOptions" :key="item.id" :value="item.id" :label="item.projectName">{{item.projectName}}</el-option>
        </el-select></div>

      </div>
      <div class="score">
        <div class="scoreData"> 综合得分：<el-rate  :disabled="!projectId" v-model="score"  :colors="colors"></el-rate></div>
        <VueEditor :disabled="!projectId" maxLength="2000" placeholder="请输入评价..." class="editor"
                   v-model="projectDetail" :editorToolbar="customToolbar"/>
      </div>
      <div class="button">
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" :disabled="!projectId" @click="confirmAndSubmission">确定评价</el-button>
      </div>
    </el-card>
  </div>
</template>


<script>
import { Quill, VueEditor } from 'vue2-editor'
import { toScore } from '@/request/todo/todo-api'
import { addScore } from '@/request/score/score-api'

let fontList = ['SimSun', '宋体', '楷体', '黑体', '幼圆']
Quill.imports['formats/font'].whitelist = fontList
Quill.register(Quill.imports['formats/font'])

let fontSizeList = [false, '10px', '12px', '14px', '16px', '20px', '24px']
Quill.imports['attributors/style/size'].whitelist = fontSizeList
Quill.register(Quill.imports['attributors/style/size'])
export default {
  created () {
  this.initOptions()
  },
  components: {
    VueEditor
  },
  data () {
    return {
      projectOptions:[],
      projectId:null,
      score: null,
      projectDetail:null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'],
      customToolbar: [
        [{ size: fontSizeList }],
        [{ font: fontList }],
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //几级标题
        ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
        ['blockquote', 'code-block'], //引用，代码块
        [{ 'list': 'ordered' }, { 'list': 'bullet' }], //列表
        [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
        [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
        [{ 'direction': 'rtl' }], // 文本方向
        [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
        // [{'font': []}], //字体
        [{ 'align': [] }], //对齐方式
        ['clean'], //清除字体样式
        // ['image', 'video'] //上传图片、上传视频
      ],
    }
  },methods:{
    async initOptions () {
      let res = await toScore()
      if (res && res.code === 200) {
        this.projectOptions = res.data
      } else {
        this.$message.error("查询项目评分信息失败")
      }
    },
    reset(){
      this.projectId=null
      this.score=0
      this.projectDetail=null
      this.initOptions()
    },
    confirmAndSubmission(){
      this.$confirm('确定提交项目评价吗？提交后不可更改', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'warning'
      }).then(async () => {
        const data = {
          projectId: this.projectId,
          score: this.score,
          projectDetail: this.projectDetail
        }
        let res = await addScore(data)
        if (res&&res.code===200){
          this.reset()
          this.$message.success("感谢您的评价！")
          this.reset()
        }else {
          this.$message.error(res.msg?res.msg:"评价失败")
        }

      }).catch(()=>{

      })
    }
  }
}
</script>
<style scoped lang="less">
.toScore {
  display: flex;
  justify-content: center;

  .card {
    width: 70%;
    min-height: 830px;

    .title {
      width: 100%;
      text-align: center;
    }
    .input {
      font-size: 14px;
      display: flex;
      margin-bottom: 20px;

      div {
        margin-right: 20px;
      }
    }
    .score {
      .scoreData{
        font-size: 14px;
        display: flex;
        margin-bottom: 10px;
      }
    .editor {
     /deep/ .ql-editor{
       height: 500px;
        overflow-y: scroll!important;
      }
    }

  }
  }
  .button{
    text-align: center;
    margin: 20px;
  }
}
</style>
